<template>
  <div class="cron-editor">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-select v-model="cronParts[0]" placeholder="秒" @change="updateCron">
          <el-option label="每一秒" value="*"></el-option>
          <el-option label="0秒" value="0"></el-option>
          <el-option label="30秒" value="30"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cronParts[1]" placeholder="分" @change="updateCron">
          <el-option label="每一分" value="*"></el-option>
          <el-option label="0分" value="0"></el-option>
          <el-option label="30分" value="30"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cronParts[2]" placeholder="时" @change="updateCron">
          <el-option label="每一小时" value="*"></el-option>
          <el-option label="0时" value="0"></el-option>
          <el-option label="12时" value="12"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cronParts[3]" placeholder="日" @change="updateCron">
          <el-option label="每一天" value="*"></el-option>
          <el-option label="1日" value="1"></el-option>
          <el-option label="15日" value="15"></el-option>
        </el-select>
      </el-col>
    </el-row>
    
    <el-row :gutter="10" style="margin-top: 10px;">
      <el-col :span="6">
        <el-select v-model="cronParts[4]" placeholder="月" @change="updateCron">
          <el-option label="每一月" value="*"></el-option>
          <el-option label="1月" value="1"></el-option>
          <el-option label="6月" value="6"></el-option>
          <el-option label="12月" value="12"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cronParts[5]" placeholder="周" @change="updateCron">
          <el-option label="每一周" value="?"></el-option>
          <el-option label="周一" value="1"></el-option>
          <el-option label="周日" value="0"></el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-select v-model="cronParts[6]" placeholder="年(可选)" @change="updateCron">
          <el-option label="不限制" value=""></el-option>
          <el-option label="当前年" value="*"></el-option>
          <el-option label="2023年" value="2023"></el-option>
          <el-option label="2024年" value="2024"></el-option>
        </el-select>
      </el-col>
    </el-row>
    
    <div style="margin-top: 15px;">
      <el-button 
        type="text" 
        size="small" 
        @click="setCron('0 0 0 * * ?')"
      >
        每天凌晨执行
      </el-button>
      <el-button 
        type="text" 
        size="small" 
        @click="setCron('0 0 12 * * ?')"
      >
        每天中午执行
      </el-button>
      <el-button 
        type="text" 
        size="small" 
        @click="setCron('0 0 0 * * 0')"
      >
        每周日凌晨执行
      </el-button>
      <el-button 
        type="text" 
        size="small" 
        @click="setCron('0 0 0 1 * ?')"
      >
        每月1日凌晨执行
      </el-button>
      <el-button 
        type="text" 
        size="small" 
        @click="setCron('0/30 * * * * ?')"
      >
        每30秒执行一次
      </el-button>
    </div>
  </div>
</template>

<script>
import { validateCronExpression } from '@/utils/cron'

export default {
  name: 'CronEditor',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cronParts: ['', '', '', '', '', '', ''] // 秒 分 时 日 月 周 年
    }
  },
  watch: {
    value: {
      handler(val) {
        this.parseCron(val)
      },
      immediate: true
    }
  },
  methods: {
    // 解析Cron表达式
    parseCron(cron) {
      if (!cron) {
        this.cronParts = ['', '', '', '', '', '', '']
        return
      }
      
      const parts = cron.split(' ')
      // 标准Cron表达式是6位或7位
      if (parts.length >= 6) {
        this.cronParts[0] = parts[0] || '' // 秒
        this.cronParts[1] = parts[1] || '' // 分
        this.cronParts[2] = parts[2] || '' // 时
        this.cronParts[3] = parts[3] || '' // 日
        this.cronParts[4] = parts[4] || '' // 月
        this.cronParts[5] = parts[5] || '' // 周
        this.cronParts[6] = parts.length >= 7 ? parts[6] : '' // 年
      }
    },
    
    // 更新Cron表达式
    updateCron() {
      let cron = ''
      // 前6位是必须的
      for (let i = 0; i < 6; i++) {
        cron += (this.cronParts[i] || '*') + ' '
      }
      // 年是可选的
      if (this.cronParts[6]) {
        cron += this.cronParts[6]
      } else {
        cron = cron.trim()
      }
      
      // 验证并更新
      if (validateCronExpression(cron)) {
        this.$emit('input', cron)
      }
    },
    
    // 设置常用Cron表达式
    setCron(cron) {
      this.$emit('input', cron)
      this.parseCron(cron)
    }
  }
}
</script>

<style scoped>
.cron-editor {
  padding: 10px 0;
}
</style>
